<%--
  Created by IntelliJ IDEA.
  User: 小柒的Java
  Date: 2021/5/9
  Time: 14:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>局部刷新ajax--实现bmi</title>
    <script type="text/javascript">
        // 使用内存中的异步对象，代替浏览器发送请求，异步对象使用js创建管理的
        function doAjax(){
            // 1.创建异步对象
            var xmlHttp=new XMLHttpRequest();
            // 2.绑定事件
            xmlHttp.onreadystatechange=function () {
                // 处理服务器端返回的数据，更新当前页面
                // alert("XMLHttpRequest"+xmlHttp+"---status"+status);
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // alert(parm)
                    // alert(xmlHttp.responseText);
                    /*获取响应返回的数据*/
                    var data = xmlHttp.responseText;
                    // 更新dom对象的页面数据
                    document.getElementById("mydata").innerText=data;
                }
            }
           // 3.初始请求数据
           // 获取参数信息
           var name= document.getElementById("name").value;
           var w= document.getElementById("w").value;
           var  h=document.getElementById("h").value;
           var parm="name="+name+"&w="+w+"&h="+h;
           xmlHttp.open("get","bmiAjax?"+parm,true);
            // 4.发起请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<center>
    <p style="color: cornflowerblue;size: 50px">全局刷新计算bmi</p>
    <div>
        <div id="mydata">等待加载数据</div>
        姓名:<input type="text" id="name"><br>
        体重(公斤):<input type="text" id="w"><br>
        身高(米):<input type="text" id="h"><br>
        <input type="button" value="计算bmi" onclick="doAjax()">
    </div>
</center>
</body>
</html>
